<template>
  <div class="message-statistic">
    <a-row gutter="16">
      <a-col :span="6">
        <a-card title="消息概况" bordered>
          <p>文本消息: {{ messageStats.text }}</p>
          <p>图片消息: {{ messageStats.image }}</p>
          <p>视频消息: {{ messageStats.video }}</p>
          <p>语音消息: {{ messageStats.voice }}</p>
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-card title="消息发送统计" bordered>
          <div ref="messageChart" style="height: 300px;"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row gutter="16" style="margin-top: 16px;">
      <a-col :span="24">
        <a-card title="群组发送趋势" bordered>
          <div ref="groupTrendChart" style="height: 300px;"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row gutter="16" style="margin-top: 16px;">
      <a-col :span="24">
        <a-card title="部门人员占比" bordered>
          <div ref="departmentChart" style="height: 300px;"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      messageStats: {
        text: 1123,
        image: 240,
        video: 60,
        voice: 420,
      },
    };
  },
  mounted() {
    this.initMessageChart();
    this.initGroupTrendChart();
    this.initDepartmentChart();
  },
  methods: {
    initMessageChart() {
      const chart = echarts.init(this.$refs.messageChart);
      const option = {
        title: {
          text: '消息发送统计',
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          name: '消息数量',
          type: 'bar',
          data: [120, 200, 150, 80, 70],
        }],
      };
      chart.setOption(option);
    },
    initGroupTrendChart() {
      const chart = echarts.init(this.$refs.groupTrendChart);
      const option = {
        title: {
          text: '群组发送趋势',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['群组数', '发送数'],
        },
        xAxis: {
          type: 'category',
          data: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '群组数',
            type: 'line',
            data: [70, 80, 90, 85, 95],
          },
          {
            name: '发送数',
            type: 'line',
            data: [50, 60, 70, 65, 75],
          },
        ],
      };
      chart.setOption(option);
    },
    initDepartmentChart() {
      const chart = echarts.init(this.$refs.departmentChart);
      const option = {
        title: {
          text: '部门人员占比',
        },
        tooltip: {
          trigger: 'item',
        },
        series: [{
          name: '部门',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 12, name: '指挥中心' },
            { value: 7, name: '运维中心' },
            { value: 4, name: '内务组' },
            { value: 12, name: '接警组' },
            { value: 30, name: '指挥调度' },
            { value: 24, name: '利剑组' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        }],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style scoped>
.message-statistic {
  padding: 20px;
}
</style>
